<template>
  <h1>App</h1>

  <button @click="fn1">提交 sayHi</button>

  <button @click="fn2">派发 sayHi</button>

  <button @click="b">派发 sayHi</button>

  <hr />

  <input type="text" v-model="msg" />

  <button @click="setMsg($store.state.app.msg + '~')">{{ $store.state.app.msg }}</button>

  <hr />
  <p>{{ userInfo }}</p>
  <button @click="login">登录</button>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('user', ['userInfo']),
    // ...mapState('app', ['msg'])

    msg: {
      get() {
        return this.$store.state.app.msg
      },

      set(value) {
        console.log('value', value)
        // 手动提交突变
        this.$store.commit('app/setMsg', value)
      }
    }
  },

  methods: {
    ...mapActions('user', {
      a: 'sayHi',
      login: 'login'
    }),
    ...mapActions('city', {
      b: 'sayHi'
    }),
    ...mapMutations('app', ['setMsg']),

    fn1() {
      this.$store.commit({
        type: 'user/sayHi'
      })
    },

    fn2() {
      this.$store.dispatch({
        type: 'sayHi'
      })
    }
  }
}
</script>
